import React, { PureComponent } from 'react';
import { Modal, Input, Button } from 'antd';
import PropTypes from 'prop-types';
import DescriptionList from '@/components/DescriptionList';
import styles from '@/common/PateoTable/TableList.less';
import { getDicByKey } from '@/utils/common';

const { Description } = DescriptionList;
const { TextArea } = Input;

export default class VehicleDetailMsgModal extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  state = {
  };

  componentDidMount() {
  }
  componentWillReceiveProps() {
  }
  close = () => {
    const { handleCloseMsg } = this.props;
    handleCloseMsg();
  }

  toUnicode = (data) => {
    return data.replace(/([\u4E00-\u9FA5]|[\uFE30-\uFFA0])/g,function(newStr){
      return "\\u" + newStr.charCodeAt(0).toString(16);
    });
  }

  parseJSON = (str) => {
    if (typeof str === 'string') {
      try {
        var obj=JSON.parse(str);
        if(obj && typeof obj === 'object'){
          return str;
        }else if (obj && typeof obj === 'string'){
          return obj;
        }
      } catch(e) {
        try {
          let obj = eval('(' + str + ')');
          return JSON.stringify(obj);
        } catch (e) {
          return str;
        }
      }
    } else {
      return str;
    }
  }
  renderSimpleForm() {
    const { msgVisible, msg } = this.props;
    const footer = (
      <div>
        <Button type="primary" onClick={this.close}>返回</Button>
      </div>
    );
    return (
      <div>
        <Modal
          title="消息详情"
          footer={footer}
          visible={msgVisible}
          onCancel={this.close}
          width="60%"
        >
          <div style={{ wordWrap: 'break-word', overflowX: 'hidden', overflowY: 'auto', height: '400px' }}>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>serviceType</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.serviceType}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>messageType</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.messageType}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>eventId</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.eventId}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>vin</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.vin}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>receiveDataTime</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.receiveDataTime}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>colletionDataTime</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.colletionDataTime}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>messageStatus</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>
                {msg ? getDicByKey(this.context.dicData, 'vehicleMessageStatus', msg.messageStatus) : ''}
              </span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>errorMsg</span>
            </div>
            <div>
              <span style={{ marginLeft: '10px' }}>{msg.errorMsg}</span>
            </div>
            <div>
              <span style={{ color: 'blue', fontWeight: 'bold' }}>respContent</span>
            </div>
            <div>
              {msg.content ? this.parseJSON(msg.content.toString()) : msg.content}
            </div>
          </div>
        </Modal>
      </div>
    );
  }


  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return (
      <div className={styles.tableListForm}>
        {this.renderForm()}
      </div>
    );
  }
}
